<template>
  <div>
    <el-button type="primary" @click="toggleTheme('default')">Default</el-button>
    <el-button type="primary" @click="toggleTheme('blue')">Blue Theme</el-button>
    <el-button type="primary" @click="toggleTheme('green')">Green Theme</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useToggle } from '@vueuse/core';

const currentTheme = ref('default');

const toggleTheme = (theme) => {
  currentTheme.value = theme;
  document.documentElement.setAttribute('data-theme', theme);
};
</script>